<template>
    <div>
      <transition name="fade">
      <Modal
        v-if="$attrs.type == 'success'"
        v-model="$attrs.show"
        width="240"
        :closable="false"
        :mask-closable="false"
        className="foot-hide"
        :styles="{top: '200px'}">
        <img  style="width: 90px;height: 90px;margin: 0 auto;display: block" src="../assets/pop/correct.png"/>
        <slot name="tip"></slot>
        <div style="margin-top: 30px; text-align:center;">
          <Button shape="circle" type="success" @click="close">我知道了</Button>
        </div>
        <div slot="footer"></div>
      </Modal>
      <Modal
        v-if="$attrs.type == 'fail'"
        v-model="$attrs.show"
        width="240"
        :closable="false"
        :mask-closable="false"
        className="foot-hide"
        :styles="{top: '200px'}">
        <img  style="width: 90px;height: 90px;margin: 0 auto;display: block" src="../assets/pop/error.png"/>
        <slot name="tip"></slot>
        <div style="margin-top: 30px; text-align:center;">
          <Button shape="circle" type="success" @click="close">我知道了</Button>
        </div>
        <div slot="footer"></div>
      </Modal>
      <Modal
        v-if="$attrs.type == 'warn'"
        v-model="$attrs.show"
        width="240"
        :closable="false"
        :mask-closable="false"
        className="foot-hide"
        :styles="{top: '200px'}">
        <img  style="width: 90px;height: 90px;margin: 0 auto;display: block" src="../assets/pop/warn.png"/>
        <slot name="tip"></slot>
        <div style="margin-top: 30px;text-align: center">
          <Button size="large" style="margin-right: 20px" @click="close">取消</Button>
          <Button size="large" type="primary" @click="confirm">确定</Button>
        </div>
        <div slot="footer"></div>
      </Modal>
      <Modal
        v-if="$attrs.type == 'tip'"
        :title="$attrs.title"
        v-model="$attrs.show"
        :width="$attrs.width"
        :mask-closable="false"
        :closable="false"
        className="foot-hide"
        :styles="{top: '200px'}">
        <div slot="header">
          <slot name="head"></slot>
        </div>
        <slot name="tip"></slot>
        <div slot="footer"></div>
      </Modal>
    </transition>
    </div>
</template>

<script>
export default {
  name: "qModal",
  prop: ["type", "show", "width"],
  data() {
    return {};
  },
  filters: {},
  methods: {
    close() {
      this.$emit("on-close");
    },
    confirm() {
      this.$emit("on-confirm");
    }
  },
  components: {},
  mounted: function() {}
};
</script>

<style lang="less">
.foot-hide {
  .ivu-modal-footer {
    opacity: 0;
  }
}
</style>
